<template>
  <a-layout>
    <Sider />
    <a-layout>
      <Header />
      <Content>
        <router-view></router-view>
      </Content>
    </a-layout>
  </a-layout>
</template>

<script>
import { onMounted, h } from "vue";

import { getUsername } from "../../utils";
import { useRouter } from "vue-router";
import { message, notification } from "ant-design-vue";
import Sider from "../../components/Sider";
import Header from "../../components/Header";
import Content from "../../components/Content";
import { SmileOutlined } from "@ant-design/icons-vue";

function checkUser() {
  const router = useRouter();
  onMounted(() => {
    const username = getUsername();
    if (!username) {
      message.warn("抱歉，你未登录，请先登录");
      router.replace("/login");
    }
  });
}

function useWelCome() {
  if (getUsername()) {
    notification.open({
      message: `欢迎你：${getUsername()}`,
      description: "广告：小葵花妈妈课堂开课啦，孩子感冒老不好，多半是...",
      icon: h(SmileOutlined, {
        style: "color: #108ee9",
      }),
      duration: 0,
    });
  }
}

export default {
  name: "Admin",
  components: {
    Sider,
    Header,
    Content,
    SmileOutlined,
  },

  setup() {
    // 验证用户是否登录
    checkUser();
    // 欢迎用户
    useWelCome();
    return {};
  },
};
</script>

<style>
.logo {
  text-align: center;
  color: #1890ff;
  font-size: 17px;
  height: 80px;
  line-height: 80px;
  overflow: hidden;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}

.ant-layout.ant-layout-has-sider {
  height: 870px;
}
</style>